<template>
  <div>{{details.name}}</div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
export default {
  // mounted(){
  //     console.log(this.$route.query);
  // }
  setup() {
    const state = reactive({
      details: {},
    });
    const router = useRouter();
    onMounted(() => {
      var { id } = router.currentRoute.value.query;
      axios
        .get(`http://122.112.161.135:3000/playlist/detail?id=${id}`)
        .then((res) => {
          state.details = res.data.playlist;
        });
    });
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>

<style>
</style>